<script setup>
import FanIcon from '..';

const namesByn = [
  'byn-zhinan-solid',
  'byn-tag-solid',
  'byn-search-solid',
  'byn-voice-solid',
  'byn-menu-solid',
  'byn-person-solid',
  'byn-gouwu-solid',
  'byn-home-solid',
  'byn-crown-solid',
  'byn-diamond-solid',
  'byn-tea-solid',
  'byn-zhinan',
  'byn-tag',
  'byn-search',
  'byn-voice',
  'byn-menu',
  'byn-person',
  'byn-gouwu',
  'byn-home',
  'byn-crown',
  'byn-diamond',
  'byn-tea',
];

const namesLine = [
  'circle',
  'caret-left',
  'caret-right',
  'caret-up',
  'caret-down',
  'carry-out',
  'check',
  'check-circle',
  'clock-circle',
  'close',
  'close-circle',
  'credit-card',
  'customer-service',
  'copy',
  'delete',
  'dislike',
  'double-left',
  'double-right',
  'down-circle',
  'down',
  'drag',
  'ellipsis',
  'environment',
  'edit',
  'exclamation-circle',
  'eye',
  'eye-invisible',
  'exclamation',
  'filter',
  'fire',
  'form',
  'heart',
  'info',
  'inbox',
  'info-circle',
  'key',
  'left-circle',
  'left',
  'like',
  'lock',
  'mail',
  'man',
  'minus-circle',
  'more',
  'notification',
  'mobile',
  'pay-circle',
  'picture',
  'paper-clip',
  'pause',
  'phone',
  'plus-circle',
  'plus',
  'pushpin',
  'qrcode',
  'question-circle',
  'question',
  'reload',
  'right-circle',
  'retweet',
  'right',
  'scan',
  'safety-certificate',
  'safety',
  'scissor',
  'send',
  'shake',
  'setting',
  'search',
  'search1',
  'shopping',
  'shopping-cart',
  'share-alt',
  'sound',
  'star',
  'sync',
  'swap',
  'tag',
  'tags',
  'team',
  'taobao',
  'transaction',
  'up',
  'unlock',
  'up-circle',
  'usergroup-add',
  'user-delete',
  'user-switch',
  'user-add',
  'user',
  'usergroup-delete',
  'wallet',
  'warning',
  'woman',
  'alipay',
  'arrow-left',
  'arrow-down',
  'arrow-right',
  'arrow-up',
  'bar-chart',
  'bell',
  'camera',
];
const namesFill = [
  'custom-service',
  'check-circle-fill',
  'left-circle-fill',
  'down-circle-fill',
  'minus-circle-fill',
  'close-circle-fill',
  'info-circle-fill',
  'up-circle-fill',
  'right-circle-fill',
  'plus-circle-fill',
  'question-circle-fill',
  'warning-circle-fill',
  'heart-fill',
  'delete-fill',
  'sound-fill',
  'bell-fill',
  'filter-fill',
  'fire-fill',
  'location-fill',
  'customerservice-fill',
  'eye-fill',
  'like-fill',
  'lock-fill',
  'unlike-fill',
  'star-fill',
  'unlock-fill',
  'phone-fill',
  'edit-fill',
  'pushpin-fill',
  'tag-fill',
  'tags-fill',
  'setting-fill',
];
</script>

<template>
  <demo-block title="基础用法">
    <FanIcon name="star-fill" size="32" style="margin: 15px" />
    <FanIcon name="star-fill" size="32" style="margin: 15px" color="red" />
    <FanIcon
      name="star-fill"
      size="32"
      style="margin: 15px"
      color="linear-gradient(45deg,red,blue)"
    />
    <FanIcon
      name="//v3.biyingniao.com/static/img/logo.447446b1.png"
      size="32"
      style="margin: 15px; vertical-align: top"
    />
  </demo-block>

  <demo-block title="必应鸟图标">
    <div
      v-for="name in namesByn"
      :key="name"
      style="
        width: 20%;
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      "
    >
      <FanIcon :name="name" size="32" style="margin: 16px auto"></FanIcon>
      <span style="font-size: 12px; text-align: center; padding: 0 3px">{{
        name
      }}</span>
    </div>
  </demo-block>

  <demo-block title="线性图标">
    <div
      v-for="name in namesLine"
      :key="name"
      style="
        width: 20%;
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      "
    >
      <FanIcon :name="name" size="32" style="margin: 16px auto"></FanIcon>
      <span style="font-size: 12px; text-align: center; padding: 0 3px">{{
        name
      }}</span>
    </div>
  </demo-block>

  <demo-block title="实底图标">
    <div
      v-for="name in namesFill"
      :key="name"
      style="
        width: 20%;
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      "
    >
      <FanIcon :name="name" size="32" style="margin: 16px auto"></FanIcon>
      <span style="font-size: 12px; text-align: center; padding: 0 3px">{{
        name
      }}</span>
    </div>
  </demo-block>
</template>
